<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            font-weight: normal;
            text-decoration: none;
            border:none;
            font-style: normal;
            vertical-align: top;/*使得图片没有间隙*/
        }
        h1{
            text-align: center;
            margin-top: 20px;
        }
        .weather{
            border: 1px solid skyblue;
            width: 500px;
            height: 500px;
            margin: 50px auto;
            text-align: center;
        }
        .weather>div:nth-child(1){
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid gold;
        }
        .box{
            margin-top: 20px;
        }

        li{
            list-style: none;
            line-height: 44px;
        }
        input{
            margin-top: 7px;
            height: 30px;
            width: 300px;
            border:1px solid skyblue;
            padding-left: 10px;

        }
        button{
            width: 50px;
            height: 30px;
            margin-top: 7px;
        }

    </style>

</head>
<body>
<div id="weather">
    <h1>天气查询</h1>
    <div class="weather">
        <div>
            <span>城市名:</span><input type="text" id="ipt" placeholder="请输入城市名字"><button id="btn">查询</button>

        </div>
        <div class="box">
            <ul class="ul">
            </ul>
        </div>

    </div>


</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script>

    $(function () {
        $('#btn').click(function () {
            $('.ul').empty();
            var text=$('#ipt').val()||'广州';
            $cityco=encodeURI(text);//JavaScript encodeURI() 函数
            $.ajax({
                type:'GET',
                url:'http://v.juhe.cn/weather/index?format=2&key=54561710c4a0aba5b38ec39760807153&cityname='+$cityco+'',
                dataType:'jsonp',
                success: function (data) {
                    var sk=data.result.sk;
                    var today=data.result.today;
                    var html='<h3>'+today.city+'天气情况</h3>'+
                            '<li>当前温度:'+sk.temp+'℃</li>'+
                            '<li>预计温度:'+today.temperature+'</li>'+
                            '<li>今天天气:'+today.weather+'</li>'+
                            '<li>紫外线强度:'+today.uv_index+'</li>'+
                            '<li>'+today.week+'</li>'+
                            '<li>'+today.date_y+'</li>'+
                            '<li>更新时间:'+sk.time+'</li>';
                    $('.ul').html(html)
                }

            })
        })

    })
</script>

</body>
</html>
